"use client"

import { Card, CardContent } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Skeleton } from "@/components/ui/skeleton"
import { RefreshCw } from "lucide-react"
import { StockCard, AppStockRecommendation } from "./stock-card"
import { SortAndFilterControls } from "@/components/sort-and-filter-controls"
import { useWatch } from "@/lib/hooks/use-watch"

interface EmptyStateConfig {
  icon: React.ComponentType<{ className?: string }>
  title: string
  description: string
  actionText?: string
  onAction?: () => void
}

interface StockListViewProps {
  // 数据相关 - 统一使用AppStockRecommendation格式
  stocks?: AppStockRecommendation[]
  isLoading: boolean

  // 排序筛选相关
  sortBy: string
  sortOrder: 'desc' | 'asc'
  onSort: (field: any) => void
  filterCodes: string
  onFilterChange: (value: string) => void

  // 股票类型判断函数
  getStockType?: (stock: AppStockRecommendation) => "strong" | "weak" | "monitoring"

  // 关注功能
  watchHook?: ReturnType<typeof useWatch>

  // 额外按钮（如搜索股票按钮）
  extraButton?: React.ReactNode

  // 空状态配置
  emptyState: EmptyStateConfig

  // 骨架屏数量
  skeletonCount?: number

  // 是否显示持仓天数
  showHoldingDays?: boolean
}

/**
 * 股票列表视图组件
 * 统一处理股票列表的显示、排序、筛选、加载状态等
 */
export function StockListView({
  stocks,
  isLoading,
  sortBy,
  sortOrder,
  onSort,
  filterCodes,
  onFilterChange,
  getStockType,
  watchHook,
  extraButton,
  emptyState,
  skeletonCount = 6,
  showHoldingDays = true
}: StockListViewProps) {

  // 渲染股票卡片 - 统一使用StockCard组件
  const renderStockCards = () => {
    if (stocks && stocks.length > 0) {
      return stocks.map((stock) => {
        const type = getStockType ? getStockType(stock) : "monitoring"
        return (
          <StockCard
            key={stock.code}
            stock={stock}
            type={type}
            watchHook={watchHook}
            showHoldingDays={showHoldingDays}
          />
        )
      })
    }

    return null
  }

  // 渲染加载状态
  const renderLoadingState = () => (
    Array.from({ length: skeletonCount }).map((_, i) => (
      <StockCardSkeleton key={i} />
    ))
  )

  // 渲染空状态
  const renderEmptyState = () => {
    const IconComponent = emptyState.icon
    return (
      <div className="col-span-full">
        <Card className="border-dashed border-2 border-muted-foreground/20">
          <CardContent className="flex flex-col items-center justify-center py-12 text-center">
            <IconComponent className="w-16 h-16 text-muted-foreground/40 mb-4" />
            <h3 className="text-lg font-semibold text-muted-foreground mb-2">
              {emptyState.title}
            </h3>
            <p className="text-sm text-muted-foreground/80 mb-4 max-w-md">
              {emptyState.description}
            </p>
            {emptyState.actionText && emptyState.onAction && (
              <Button
                onClick={emptyState.onAction}
                variant="outline"
                className="flex items-center space-x-2"
              >
                <RefreshCw className="w-4 h-4" />
                <span>{emptyState.actionText}</span>
              </Button>
            )}
          </CardContent>
        </Card>
      </div>
    )
  }

  const hasData = stocks && stocks.length > 0

  return (
    <>
      <SortAndFilterControls
        sortBy={sortBy}
        sortOrder={sortOrder}
        onSort={onSort}
        filterCodes={filterCodes}
        onFilterChange={onFilterChange}
        extraButton={extraButton}
      />
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {hasData ? (
          renderStockCards()
        ) : isLoading ? (
          renderLoadingState()
        ) : (
          renderEmptyState()
        )}
      </div>
    </>
  )
}

/**
 * 股票卡片骨架屏组件
 */
function StockCardSkeleton() {
  return (
    <Card>
      <CardContent className="p-4">
        <div className="space-y-3">
          <div className="flex justify-between items-start">
            <div className="space-y-2">
              <Skeleton className="h-4 w-20" />
              <Skeleton className="h-3 w-16" />
            </div>
            <div className="space-y-2">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-4 w-4" />
            </div>
          </div>
          <div className="grid grid-cols-2 gap-2">
            <div className="space-y-1">
              <Skeleton className="h-3 w-12" />
              <Skeleton className="h-3 w-16" />
            </div>
            <div className="space-y-1">
              <Skeleton className="h-3 w-12" />
              <Skeleton className="h-3 w-16" />
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}
